<script setup>
import { getVideoDevice, closeRtmp } from '@/assets/api/device'
import { getNewAlarm } from '@/assets/api/api'
import videoItem from '@/components/video/screenVideoItem.vue'
import { ref, onBeforeUnmount, onMounted } from 'vue'
import { isEmptyObject } from '@/assets/js/utils'
import { useRouter } from 'vue-router'
import config from '@/assets/js/config'
import { useUserStore } from '@/stores/index'
const userStore = useUserStore()
const router = useRouter()
const videoList = ref([])
const videoData = ref({})
const videoItemRefs = ref()
const alarmList = ref([])
function getData() {
    getVideoDevice().then((res) => {
        videoList.value = res.data
    })
    getNewAlarmList()
}
function getNewAlarmList() {
    getNewAlarm().then((res) => {
        alarmList.value = res.data
    })
}
function playVideo(item) {
    if (!isEmptyObject(videoData.value)) {
        const oldNubmer = videoData.value.number
        videoData.value = {}
        closeRtmp(oldNubmer).then(() => {
            videoData.value = item
            // nextTick(() => {
            //     videoItemRefs.value.updateVideo()
            // })
        })
    } else {
        videoData.value = item
    }
}
function beforeunloadHandler() {
    if (!isEmptyObject(videoData.value)) {
        closeRtmp(videoData.value.number).then(() => {
            console.log('关闭')
        })
    }
}
function goBack() {
    router.go(-1)
}
const ws = new WebSocket(config.socketUrl)
function openSocket() {
    //  //连接发生错误的回调方法
    ws.onerror = function () {
        console.log('ws连接发生错误')
    }
    //连接成功建立的回调方法
    ws.onopen = function () {
        console.log('ws连接成功')
    }
    //接收到消息的回调方法
    ws.onmessage = function (msg) {
        console.log('更新', msg)
        getNewAlarmList()
        // ws.close()
    }
    //连接关闭的回调方法
    ws.onclose = function () {
        console.log('ws连接关闭')
    }
}
onMounted(() => {
    openSocket()
    window.addEventListener('beforeunload', (e) => beforeunloadHandler(e))
})
onBeforeUnmount(() => {
    ws.close()
    //组件销毁之前执行
})
getData()
</script>
<template>
    <div id="realtimeAlarm">
        <div class="topImg cr-wt ps-re">
            <span
                title="返回"
                class="icon ps-ab ps-l-10 fs-20 cursor"
                style="color: #9cd3ff"
                @click="goBack"
            >
                &#xe647;
            </span>
            {{ userStore.systemInfo.gatewayName }}
        </div>
        <div class="fl-bw d-flex-1 pd-15">
            <div class="aside">
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo mt-80"
                    background-color="#0e356e"
                    text-color="#fff"
                    active-text-color="#06a8fe"
                >
                    <el-menu-item
                        v-for="(item, index) in videoList"
                        :index="index"
                        :key="item.number"
                        @click="playVideo(item)"
                    >
                        <span>{{ item.name }}</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="container flex-column-bw">
                <div class="container-live">
                    <videoItem
                        ref="videoItemRefs"
                        :videoData="videoData"
                        v-if="!isEmptyObject(videoData)"
                    ></videoItem>
                    <!--    :videoData="videoData" -->
                    <div
                        style="background: #000; width: 100%; height: 100%"
                        v-else
                    ></div>
                </div>
                <div class="container-info dflex">
                    <div
                        v-for="item in alarmList"
                        :key="item.id"
                        class="mianBox"
                    >
                        <div class="top">
                            <div class="fs-14">
                                {{ item.alarm_type_name }}
                            </div>
                            <div>
                                {{ item.alarm_time }}
                            </div>
                        </div>

                        <img :src="item.image_path" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#realtimeAlarm {
    background-image: url('./image/bg-data.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.aside {
    width: 19%;
    background-image: url('./image/container-camera-list.png');
    background-size: 100% 100%;
}
.container {
    width: 80%;
}
.container-live {
    width: 100%;
    background-image: url('./image/container-live.png');
    background-size: 100% 100%;
    height: 68%;
    padding: 60px 45px 45px 45px;
    position: relative;
    color: #fff;
}
.container-info {
    background-image: url('./image/container-warn-info.png');
    background-size: 100% 100%;
    height: 32%;
    padding: 55px 15px 15px 15px;
    margin-top: 10px;
    .mianBox {
        border: 2px solid #193f82;
        color: #fff;
        width: 20%;
        .top {
            background: #0370c5;
            padding: 10px;
        }
        img {
            height: 0.8rem !important;
            width: 100% !important;
        }
    }
}
.topImg {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid #3f95ff;
    display: flex;
    align-items: center;
    font-size: 26px;
    justify-content: center;
}
</style>
